<template>
  <div class="field-item" :class="[layout == 'inline' ? 'inline-block' : 'flex']" :style="{ marginBottom: marginBottom ? '6px' : 0 }">
    <span class="field-label" :style="labelStyle">{{ label }}{{ colon ? '：' : '' }} </span>
    <span class="field-value" :class="[layout == 'inline' ? '' : 'flex-1']">
      <slot>-</slot>
    </span>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    label: String,
    colon: {
      type: Boolean,
      default: true,
    },
    layout: {
      type: String,
      default: 'inline', // inline || flex
    },
    labelWidth: Number,
    labelStyle: Object,
    marginBottom: {
      type: Boolean,
      default: false,
    },
  })

  const labelStyle = computed(() => {
    return {
      width: props.labelWidth ? props.labelWidth + 'px' : undefined,
      ...props.labelStyle,
    }
  })
</script>

<style lang="less" scoped>
  .field-item {
    font-size: 14px;
    line-height: 22px;
    .field-label {
      color: var(--color-text-2);
    }
    .field-value {
      color: var(--color-text-1);
      word-break: break-all; // 添加这一行
    }
  }
</style>
